<template>
    <div class="job-box">
        <!-- 面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/loginRedirect' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>职位管理</el-breadcrumb-item>
            <el-breadcrumb-item>职位信息</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 搜索 -->
        <el-input placeholder="请输入职位搜索" v-model="jobSearch" clearable @clear="clearSearchData" @keyup.enter.native="searchJobByname()" style="width:40%;margin-top:15px"></el-input>
        <el-button type="success" @click="searchJobByname()">查询</el-button>
        <el-button type="primary" @click="addJobDialog">新增</el-button>
        <!-- 数据表格 -->
        <el-table
            :data="JobData"
            stripe
            style="width: 100%;margin-top:10px"
            :header-cell-style="{textAlign: 'center'}"
            :cell-style="{ textAlign: 'center' }">
            <el-table-column
                type="index"
                label="序号"
                width="450%">
            </el-table-column>
            <el-table-column
                prop="roleName"
                label="职位/角色"
                width="450%">
            </el-table-column>
            <el-table-column
                label="操作"
                width="450%">
                <template slot-scope="scope">
                    <el-button size="small" type="success" @click="addJobDialog">新增</el-button>
                    <el-button size="small" type="primary" @click="updateJobDialog(scope.row)">修改</el-button>
                    <el-button size="small" type="danger" @click="deleteJob(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
            background
            style="margin-top:10px"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[7, 8, 9]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totals">
        </el-pagination>
        <!-- 添加dialog -->
        <el-dialog
            title="添加职位"
            :visible.sync="addJobDialogVisible"
            width="30%">
            <el-input placeholder="请输入新增职位" v-model="jobName"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancleAddJob()">取 消</el-button>
                <el-button type="primary" @click="addJob()">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 修改dialog -->
        <el-dialog
            title="修改职位信息"
            :visible.sync="updateJobDialogVisible"
            width="30%">
            <el-input placeholder="请输入新增职位" v-model="jobInfo.roleName"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancleUpdateJob()">取 消</el-button>
                <el-button type="primary" @click="updateJob()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data(){
        return{
            JobData:[],
            jobSearch:"",
            page:1,
            size:8,
            totals:0,
            addJobDialogVisible:false,
            updateJobDialogVisible:false,
            jobName:'',
            jobInfo:{},
            req_prefix:"/job"
        }
    },
    created(){
        this.getJobData();
    },
    methods:{
        // 获取职位信息
        getJobData(){
            this.$http.get(`${this.req_prefix}/queryJobByPage/${this.page}/${this.size}?jobName=${this.jobSearch}`).then((result)=>{
                // console.log(result);
                if(result.code === 200){
                    this.JobData = result.data.jobList;
                    this.totals = result.data.totals - 0;
                }else{
                    this.$message.error("系统错误,请联系管理员!!!");
                }
            }).catch((err)=>{
                console.log(err);
                this.$message.error("系统错误,请联系管理员!!!");
            });
        },
        // 搜索
        searchJobByname(){
            this.getJobData();
        },
        // 分页
        handleSizeChange(val) {
            this.size = val;
            this.getJobData();
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.page = val;
            this.getJobData();
            console.log(`当前页: ${val}`);
        },
        // 清楚搜索框
        clearSearchData(){
            this.getJobData();
            this.$message.success("清除成功!!!");
        },
        // 新增
        addJobDialog(){
            this.addJobDialogVisible = true;
        },
        addJob(){
            if(this.jobName === ""){
                return this.$message.warning("职位名称不能为空!!!");
            }
            this.$http.post(`${this.req_prefix}/addJob`,"jobName="+this.jobName).then((res)=>{
                // console.log(res);
                if(res.data){
                    this.$message.success("添加成功!!!");
                    this.addJobDialogVisible = false;
                    this.getJobData();
                    this.jobName = "";
                }else{
                    this.$message.error("添加失败!!!");
                }
            }).catch((err)=>{
                this.$message.error("系统错误,请联系管理员!!!");
            })
        },
        // 取消添加
        cancleAddJob(){
            this.addJobDialogVisible = false;
            this.jobName = "";
            this.$message.warning("已取消操作!!!");
        },
        // 删除
        deleteJob(row){
            this.$confirm('确定删除改职位? 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.get(`${this.req_prefix}/delJob/${row.roleId}`).then((res)=>{
                    if(res.code === 200 && res.data){
                        this.getJobData();
                        this.$message.success("删除成功!!!");
                    }else{
                        this.$message.error("删除失败,请联系管理员!!!");
                    }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 修改
        updateJobDialog(row){
            this.jobInfo = row;
            this.updateJobDialogVisible = true;
        },
        cancleUpdateJob(){
            this.getJobData();
            this.updateJobDialogVisible = false;
            this.$message.warning("已取消操作!!!");
        },
        updateJob(){
            if(this.jobInfo.roleName === null || this.jobInfo.roleName === ''){
                return this.$message.warning("职位名称不能为空!!!");
            }
            this.$http.post(`${this.req_prefix}/updateJob`,this.jobInfo).then((res)=>{               
                if(res.code === 200 && res.data){
                    this.updateJobDialogVisible = false;
                    this.$message.success("修改成功!!!");
                    this.jobInfo = {};
                }else{
                    this.$message.error("修改失败,请联系管理员!!!");
                }
            }).catch((res)=>{
                this.$message.error("修改失败,请联系管理员!!!");
            });
        }
    }
}
</script>

<style>

</style>
